<template>
    <div class="container">
        <Breadcrumb
            :items="[
                'menu.device',
                'menu.device.device',
                'menu.device.monitor',
            ]"
        />

        <a-card>
            <a-row>
                <a-col :span="3">
                    <a-select
                        v-model="selectStation"
                        :style="{ width: '180px' }"
                        placeholder="请选择站点"
                        allow-search
                        @change="fnStationChange"
                    >
                        <template
                            v-for="item in stations"
                            :key="item.stationId"
                        >
                            <a-option :value="item.stationId">{{
                                item.stationName
                            }}</a-option>
                        </template>
                    </a-select>
                </a-col>
                <a-divider
                    direction="vertical"
                    :style="{
                        height: '32px',
                    }"
                />
                <a-col :span="1">
                    <a-button type="primary" size="small" @click="add"
                        >选择指标</a-button
                    >
                </a-col>
                <a-col flex="1">
                    <a-form ref="formRef" :model="formData">
                        <a-form-item field="dateRange" label="请选择时间">
                            <a-range-picker
                                v-model="formData.dateRange"
                                show-time
                                :time-picker-props="{
                                    defaultValue: ['00:00:00', '00:00:00'],
                                }"
                                style="width: 380px"
                            />
                        </a-form-item>
                    </a-form>
                </a-col>
                <a-divider
                    direction="vertical"
                    :style="{
                        height: '52px',
                    }"
                />
                <a-space :size="6" direction="vertical">
                    <a-button type="primary" size="mini" @click="search()">
                        <template #icon>
                            <icon-search />
                        </template>
                        {{ $t('search') }}
                    </a-button>
                    <a-button size="mini" @click="reset">
                        <template #icon>
                            <icon-refresh />
                        </template>
                        {{ $t('reset') }}
                    </a-button>
                </a-space>
            </a-row>
            <a-divider />

            <a-row :gutter="24" class="list-row">
                <a-col v-if="chartList.length === 0">
                    <a-empty />
                </a-col>
                <a-col
                    v-for="(item, index) in chartList"
                    :key="item.deviceId + item.identifier"
                    :xs="12"
                    :sm="12"
                    :md="12"
                    :lg="8"
                    :xl="8"
                    :xxl="8"
                    class="list-col"
                >
                    <CardWarp
                        :ref="(el: any) => (cardWarpRefs[index] = el)"
                        :device-id="item.deviceId"
                        :device-name="item.deviceName"
                        :identifier="item.identifier"
                        :identifier-name="item.identifierName"
                        :data-range="formData.dateRange"
                        :specs-unit="item.specsUnit"
                        :specs-desc="item.specsDesc"
                        @remove-chart-wrap="fnRemoveChartWrap"
                    >
                    </CardWarp>
                </a-col>
            </a-row>
        </a-card>
        <DialogDeviceSelect
            ref="dialogDeviceSelect"
            :title="addTitle"
            @check-device-prop="fnCheckDeviceProp"
        ></DialogDeviceSelect>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { useI18n } from 'vue-i18n';
    import CardWarp from './components/card-warp.vue';
    import DialogDeviceSelect from './components/dialog-device-select.vue';
    import { getStationList } from './service';

    const chartList = ref<any[]>([]);
    const t = useI18n();
    const formRef = ref();
    const dialogDeviceSelect = ref();
    const formData = ref({
        dateRange: ['', ''],
    });
    const cardWarpRefs: any[] = [];
    const addTitle = '设备指标选择';
    const selectStation = ref();
    const stations = ref<any[]>([]);

    function add() {
        dialogDeviceSelect.value.open();
        // const item = {
        //     stationId: '1',
        //     stationName: '南区',
        //     deviceId: '14',
        //     deviceName: 'ddd',
        //     identifier: 'price',
        //     identifierName: '温度',
        // };
        // chartList.value.push(item);
    }
    function search() {
        if (cardWarpRefs.length === 0) {
            return;
        }
        cardWarpRefs.forEach((cardWarpRef: any) => {
            if (cardWarpRef) {
                cardWarpRef.loadData(formData.value);
            }
        });
    }
    const fetchStations = async () => {
        const data = await getStationList({ current: 1, size: 9999 });
        const { result } = data as any;
        stations.value = result.records;
    };
    fetchStations();
    const fnStationChange = (value: any) => {
        // console.log(value);
        dialogDeviceSelect.value.fetchDevicesByStationId(value);
        chartList.value.length = 0;
    };
    function reset() {
        formRef.value.resetFields();
        selectStation.value = '';
        fnStationChange(selectStation.value);
        // console.log(selectStation.value);
    }
    const fnCheckDeviceProp = (checked: boolean, device: any, prop: any) => {
        console.log(device, prop.identifier, checked);
        if (checked) {
            const propList = device.propertyList.filter((o: any) => {
                return o.identifier === prop.identifier;
            });
            const propObj = propList[0];
            console.log(propObj);
            if (propObj.datatype === 'enum') {
                console.log(JSON.stringify(propObj.specs));
            }
            const item = {
                deviceId: device.id,
                deviceName: device.deviceName,
                identifier: prop.identifier,
                identifierName: prop.name,
                specsUnit: prop.specs?.unit,
                specsDesc:
                    propObj.datatype === 'enum' || propObj.datatype === 'bool'
                        ? Object.entries(propObj.specs)
                        : '',
            };
            chartList.value.push(item);
            console.log(item);
        } else {
            const dataIndex = chartList.value.findIndex(
                (item) =>
                    item.deviceId === device.id &&
                    item.identifier === prop.identifier
            );
            chartList.value.splice(dataIndex, 1);
            cardWarpRefs.splice(dataIndex, 1);
        }
    };
    const fnRemoveChartWrap = (deviceId: number, identifier: string) => {
        dialogDeviceSelect.value.changTagChecked(deviceId, identifier, false);
        const dataIndex = chartList.value.findIndex(
            (item) =>
                item.deviceId === deviceId && item.identifier === identifier
        );
        chartList.value.splice(dataIndex, 1);
        cardWarpRefs.splice(dataIndex, 1);
    };
</script>

<style scoped lang="less">
    .list-row {
        align-items: stretch;

        .list-col {
            margin-bottom: 16px;
        }
    }

    .sider-nav-warper {
        padding: 10px;

        .arco-radio {
            width: 100%;
            margin: 5px;
        }
    }

    .custom-radio-card {
        box-sizing: border-box;
        width: 100%;
        padding: 10px 16px;
        border: 1px solid var(--color-border-2);
        border-radius: 4px;
        //align-items: center;
    }

    .custom-radio-card-mask {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 14px;
        height: 14px;
        border: 1px solid var(--color-border-2);
        border-radius: 100%;
    }

    .custom-radio-card-mask-dot {
        width: 8px;
        height: 8px;
        border-radius: 100%;
    }

    .custom-radio-card-title {
        color: var(--color-text-1);
        font-weight: bold;
        font-size: 14px;
    }

    .custom-radio-card:hover,
    .custom-radio-card-checked,
    .custom-radio-card:hover .custom-radio-card-mask,
    .custom-radio-card-checked .custom-radio-card-mask {
        border-color: rgb(var(--primary-6));
    }

    .custom-radio-card-checked {
        background-color: var(--color-primary-light-1);
    }

    .custom-radio-card:hover .custom-radio-card-title,
    .custom-radio-card-checked .custom-radio-card-title {
        color: rgb(var(--primary-6));
    }

    .custom-radio-card-checked .custom-radio-card-mask-dot {
        background-color: rgb(var(--primary-6));
    }
</style>
